<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <button onclick="console.log(this, event)">计数1</button>

    <button onclick="btnClickHandler(this, event)">计数2</button>
    <script>
      // 如果你想在函数内拿到,按钮（标签）和事件对象
      function btnClickHandler(arg1, arg2) {
        console.log(arg1); // 按钮
        console.log(arg2); // 事件对象
        // 总结：arg1是按钮本身。arg2是event，是事件对象本身。

        // 注意这里的函数体内的this
        // 因为定义了 btnClickHandler 它是一个函数，函数内一定创建自己的 this
        // 又因为 btnClickHandler 执行方式是按照 DOM0 方式执行，此时 this 指向的是 window。
        console.log(this);

        // 注意这里的函数体内的 event，因为 btnClickHandler 函数内没有创建同名的 event
        // 根据作用域链查找规则，会向上查找，找到 eval 作用域的event，打印的是事件对象也就是 arg2
        // console.log(event);

        // 总结
        // 这种事件函数的绑定方式，this 和 按钮本身概念混乱，所以有了之后的事件绑定方法。
      }
    </script>
    <!-- DOM 元素的属性绑定 -->
    <button id="btn-003">计数3</button>
    <script>
      const button = document.getElementById('btn-003');
      button.onclick = function (event) {
        // 正确的指向了 button
        console.log(this);
        // 通用的事件对象
        console.log(event);
      };
      const a = 'aaaaaaa';
    </script>

    <!-- 最新的绑定方式 -->
    <button id="btn-004">计数4</button>
    <script>
      console.log(a);
      const button4 = document.getElementById('btn-004');

      function onClick1(event) {
        console.log('onClick1 this', this);
        console.log('onClick1 event', event);
      }
      function onClick2(event) {
        console.log('onClick2 this', this);
        console.log('onClick2 event', event);
      }
      button4.addEventListener('click', onClick1);
      button4.addEventListener('click', onClick2);
    </script>
  </body>
</html>
